<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="12">
          <a-col :md="6" :sm="24">
            <a-form-item label="入库单号">
              <a-input v-model="queryParam.orderNumber" placeholder="请输入"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="计划单号">
              <a-input v-model="queryParam.planOrderNumber" placeholder="请输入"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="生产单号">
              <a-input v-model="queryParam.sourceOrderNumber" placeholder="请输入"/>
            </a-form-item>
          </a-col>
          
          
          <a-col :md="6" :sm="24">
            <a-form-item>
              <a-button type="primary" @click="table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="handleResetSearch">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :scroll="{
        x: 1200
      }"
      :alert="true"
      :rowKey="(record) => record.code"
      :rowSelection="rowSelection"
    >
      <div slot="action" slot-scope="text, record">
        <a @click="backStoreDetailModal.show(record)">退库详情</a>
      </div>
    </s-table>
    
    <back-store-detail-modal ref="backStoreDetailModal"/>
  </a-card>
</template>

<script lang="ts">
import {Component, Vue, Ref} from "vue-property-decorator";
import {STable} from '@/components'
import {page} from '@/api/modular/main/emsorder/emsOrderManage.js'
import BackStoreDetailModal from './backStoreDetailModal.vue'

type Record = {
  materialId: string,
  materialCode: string,
  materialName: string,
  number: number,
  completedNumber: number,
}

@Component({
  components: {
    STable,
    BackStoreDetailModal
  }
})
export default class EmsMaterialBackStoreWarehousing extends Vue {
  @Ref() readonly table!: any
  @Ref() readonly backStoreDetailModal!: BackStoreDetailModal
  
  columns = [
    {
      align: 'center',
      
      title: '序号', width: '80px',
      customRender: (text, record, index) => `${index + 1}`
    },
    {
      align: 'center',
      title: '入库单号',
      dataIndex: 'orderNumber'
    }, {
      align: 'center',
      title: '入库类型',
      dataIndex: 'remark'
    },
    {
      align: 'center',
      title: '计划单号',
      dataIndex: 'planOrderNumber'
    }, {
      align: 'center',
      title: '生产单号',
      dataIndex: 'sourceOrderNumber'
    }, {
      align: 'center',
      title: '入库时间',
      dataIndex: 'createTime'
    },
    {
      align: 'center',
      title: '操作',
      dataIndex: '',
      width: '150px',
      scopedSlots: {customRender: 'action'}
    }
  ]
  
  queryParam = {
    materialType: '',
    orderNumber: '',
    planOrderNumber: '',
    sourceOrderNumber: '',
    orderType: '',
  }
  selectedRowKeys = []
  selectedRows = []
  orderType = this.$businessEnum.ORDER_TYPE_ENUM.inOrder.id
  materialType = this.$businessEnum.MATERIAL_TYPE_ENUM.packing.id
  
  rowSelection = {
    getCheckboxProps: (record: Record) => ({
      props: {
        disabled: record.completedNumber > 0,
        name: record.materialCode,
      },
    }),
    selectedRowKeys: this.selectedRowKeys,
    onChange: this.onSelectChange
  }
  
  
  // 加载数据方法 必须为 Promise 对象
  loadData(parameter: { pageNo: number, pageSize: number }) {
    this.queryParam.orderType = this.orderType
    this.queryParam.materialType = this.materialType
    const params = {
      ...parameter,
      ...this.queryParam,
      planType: 1,
    }
    return page(params).then((res) => {
      return res.data
    })
  }
  
  
  handleOk() {
    this.table.refresh()
    this.table.clearSelected()
  }
  
  handleResetSearch() {
    this.queryParam = {
      materialType: '',
      orderNumber: '',
      planOrderNumber: '',
      sourceOrderNumber: '',
      orderType: '',
    }
    this.table.refresh()
    
  }
  
  onSelectChange(selectedRowKeys, selectedRows) {
    this.selectedRowKeys = selectedRowKeys
    this.selectedRows = selectedRows
  }
  
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
</style>
